<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="regist-page">
        <div style="height: 40px; width: 100%"></div>
        <div id="progress-bar" class="auto-width">
          <div class="text">
            <span class="active">验证手机</span>
            <span
              class="round2"
              :style="{ color: index > 0 ? '#EE781B' : '#4A4A4A' }"
              >设置用户信息</span
            >
            <span
              class="round3"
              :style="{ color: index > 1 ? '#EE781B' : '#4A4A4A' }"
              >注册成功</span
            >
          </div>
          <div class="bar-wrapper">
            <div class="bar active">
              <span class="round">1</span>
            </div>
            <div class="bar" id="round2">
              <span
                class="round"
                :style="{ background: index > 0 ? '#EE781B' : '#F7C89D' }"
                >2</span
              >
              <div
                class="line"
                :style="{ background: index > 0 ? '#EE781B' : '#F7C89D' }"
              ></div>
            </div>
            <div class="bar" id="round3">
              <span
                class="round fa fa-check"
                :style="{ background: index > 1 ? '#EE781B' : '#F7C89D' }"
                >3</span
              >
              <div
                class="line"
                :style="{ background: index > 1 ? '#EE781B' : '#F7C89D' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="register-box">
          <div id="step-1" v-if="index == 0">
            <form id="step-1-form" action="" method="" autocomplete="off">
              <div class="input-group">
                <!--st1:phone-->
                <div class="inner-box">
                  <span class="lable"><b style="color: red">* </b>手机号</span>
                  <input
                    class="phone"
                    type="text"
                    name="phone"
                    placeholder="请输入手机号"
                    autocomplete="new-password"
                    maxlength="11"
                    style="width: 246px"
                    v-model.trim="dataForm.phone"
                  />
                  <span
                    style="font-size: 14px; color: #b9b9b9; margin-left: 10px"
                    >请填写实名认证手机号，后续将用于实名认证</span
                  >
                </div>
              </div>
              <div class="input-group">
                <!--st1:m_code-->
                <div class="inner-box">
                  <span class="lable"
                    ><b style="color: red">* </b>手机验证码</span
                  >
                  <div class="wrapper">
                    <input
                      type="text"
                      id="m_code"
                      class="v-code"
                      name="m_code"
                      placeholder="请输入验证码"
                      v-model.trim="dataForm.verifySmsCode"
                      autocomplete="new-password"
                      maxlength="6"
                    />
                    <input
                      type="button"
                      class="box sendSms"
                      @click="sendSms"
                      :disabled="disabled"
                      :value="smsTitle"
                    />
                  </div>
                </div>
              </div>
              <!--   <div class="input-group">

            <div class="inner-box">
              <span class="lable">图形验证码</span>
              <div class="wrapper">
                <input
                  id="v_code"
                  type="text"
                  class="v-code"
                  name="v_code"
                  maxlength="4"
                  v-model="dataForm.verifyCode"
                  autocomplete="new-password"
                />
                <span class="box"
                  ><img
                    class=""
                    :src="picUrl"
                    alt=""
                    onclick="this.src='/capacha?'+new Date().getTime()"
                /></span>
              </div>
            </div>
            <p class="warning">
              <i class="fa fa-close"></i>
              <span>...</span>
            </p>
          </div>
          -->

              <div class="input-group">
                <div class="rule clearfix">
                  <div class="select-icon fl" @click="isArgee = !isArgee">
                    <img
                      src="../../assets/img/select.png"
                      alt=""
                      v-if="isArgee"
                    />
                    <img src="../../assets/img/noSelect.png" alt="" v-else />
                  </div>
                  <div class="fl">
                    <span>请阅读并同意</span>
                    <a href="javascript:;" @click="lookRuleType(3)"
                      >《隐私权政策协议》</a
                    >
                    <a href="javascript:;" @click="lookRuleType(1)"
                      >《普通用户注册协议》</a
                    >
                    <a href="javascript:;" @click="lookRuleType(2)"
                      >《基地商户注册协议》</a
                    >
                  </div>
                </div>
              </div>

              <input
                type="button"
                value="下一步"
                class="sub"
                @click="toNextSecond(1)"
              />
            </form>
          </div>
          <div id="step-2" v-if="index == 1">
            <form id="step-2-form" action="" method="post" autocomplete="off">
              <div class="input-group">
                <div class="inner-box clearfix">
                  <!--st2:userId-->
                  <span class="lable fl"
                    ><b style="color: red">* </b>选择用户类型</span
                  >
                  <selectMock
                    :list="merchantTypeList"
                    class="fl"
                    @selectValue="selectUserTypeValue"
                    :placeholder="'请选择用户类型'"
                  ></selectMock>
                </div>
              </div>
              <div class="input-group">
                <div class="inner-box clearfix">
                  <!--st2:userId-->
                  <span class="lable fl"
                    ><b style="color: red">* </b>选择类型</span
                  >
                  <selectMock
                    :list="userTypeList"
                    class="fl"
                    :placeholder="'请选择类型'"
                    @selectValue="selectTypeValue"
                  ></selectMock>
                </div>
              </div>

              <!-- <div class="input-group">
                <div class="inner-box">
                  <span class="lable"><b style="color: red">* </b>用户名</span>
                  <input
                    class="phone"
                    type="text"
                    name="userId"
                    autocomplete="new-password"
                    placeholder="请输入用户名"
                    v-model.trim="dataForm.userId"
                  />
                </div>
              </div> -->
              <div class="input-group">
                <div class="inner-box">
                  <!--st2:upwd-->
                  <span class="lable"><b style="color: red">* </b>密码</span>
                  <div class="wrapper">
                    <input
                      class="phone"
                      type="password"
                      name="upwd"
                      autocomplete="new-password"
                      placeholder="请输入密码"
                      v-model.trim="dataForm.userPwd"
                      @blur="usePwdValidate(dataForm.userPwd)"
                    />
                  </div>
                </div>
                <p class="warning">
                  <i class="fa fa-close"></i>
                  <span>...</span>
                </p>
              </div>
              <div class="input-group">
                <div class="inner-box">
                  <!--st2:upwd2-->
                  <span class="lable"
                    ><b style="color: red">* </b>确认密码</span
                  >
                  <input
                    class="phone"
                    type="password"
                    name="upwd2"
                    placeholder="请再次输入密码"
                    maxlength="14"
                    :disabled="pwdDisabled"
                    v-model.trim="dataForm.comfirmPwd"
                    @blur="comfirmUsePwdValidate(dataForm.comfirmPwd)"
                  />
                </div>
              </div>
              <div class="input-group">
                <div class="inner-box">
                  <!--st2:recommendPhone-->
                  <span class="lable">推荐人电话</span>
                  <input
                    class="phone"
                    type="text"
                    name="recommendPhone"
                    autocomplete="new-password"
                    placeholder="请输入推荐人电话"
                    v-model.trim="dataForm.recommendPhone"
                  />
                </div>
              </div>
              <div class="input-group">
                <div class="inner-box">
                  <!--st2:recommendName-->
                  <span class="lable">推荐人姓名</span>
                  <input
                    class="phone"
                    type="text"
                    name="recommendName"
                    autocomplete="new-password"
                    placeholder="请输入推荐人姓名"
                    v-model.trim="dataForm.recommendName"
                  />
                </div>
              </div>
              <input
                type="button"
                value="下一步"
                class="sub"
                style="margin-left: 167px"
                @click="toNextSecond(3)"
              />
            </form>
          </div>
          <div id="step-3" v-if="index == 3">
            <div class="container clearfix">
              <img src="../../assets/img/succ.png" class="fl" />

              <div class="title">
                <div class="user-info">
                  <p>恭喜您！注册成功，请等待管理员审核</p>
                  <p>
                    <span>绑定的账号：</span> <span>{{ dataForm.userId }}</span>
                  </p>
                  <p>
                    <span>绑定的手机：</span> <span>{{ dataForm.phone }}</span>
                  </p>
                </div>
                <div class="prompt">
                  <h2>温馨提示：</h2>
                  <p>
                    请牢记您的账号、绑定的手机号及密码。<br />
                    除普通用户外的商户请登录
                    <span> 管理后台</span>
                    完善相应信息！<br />系统将5秒后跳转到首页，如未跳转晴点击
                    <span>跳转到首页</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
    <FooterPage></FooterPage>

    <el-dialog
      :title="
        ruleType == 1
          ? '普通用户注册协议'
          : ruleType == 2
          ? '基地商户注册协议'
          : '隐私权政策协议'
      "
      :visible.sync="dialogVisible"
      width="80%"
    >
      <ordinaryUserRegistration v-if="ruleType == 1"></ordinaryUserRegistration>
      <baseMerchantRegistration
        v-else-if="ruleType == 2"
      ></baseMerchantRegistration>
      <privateAgreement v-else></privateAgreement>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import selectMock from "../../components/selectMock";
import navPage from "../../components/nav";
import privateAgreement from "./privateAgreement";
import ordinaryUserRegistration from "./ordinaryUserRegistration";
import baseMerchantRegistration from "./baseMerchantRegistration";

var pwdRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/;
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    selectMock,
    navPage,
    //协议
    privateAgreement,
    ordinaryUserRegistration,
    baseMerchantRegistration,
  },
  data() {
    return {
      index: 0,
      timer: null,
      smsTitle: "发送验证码",

      //协议弹窗
      dialogVisible: false,
      ruleType: 1, //规则类型
      isArgee: false, //是否同意协议

      //协议弹窗的其他
      disabled: false,
      pwdDisabled: true,
      dataForm: {
        phone: "",
        verifyCode: "",
        userType: "",
        userId: "",
        comfirmPwd: "",
        userPwd: "",
        merchantType: "",
        verifySmsCode: "",
        recommendPhone: "",
        recommendName: "",
      },
      userTypeList: [
        { value: "PERSON", label: "个人" },
        { value: "CORP", label: "企业" },
      ],
      merchantTypeList: [],
      pwdIsRight: false,
      loading: false,
      picUrl: this.baseUrl + "/sys/user/getVerifyCode.do",
    };
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    getRoleList() {
      this.$http("post", "/sys/role/findMerchantTypeList.do").then((res) => {
        console.log(res);
        var merchantTypeList = [];
        if (res.code == "0000") {
          var data = res.result;
          for (var k in data) {
            merchantTypeList.push({
              value: data[k].merchantType,
              label: data[k].merchantTypeName,
            });
          }
          this.dataForm.userId = "";
          this.merchantTypeList = merchantTypeList;
        }
      });
    },
    // 查看协议
    lookRuleType(index) {
      this.dialogVisible = true;
      this.ruleType = index;
    },

    // 去注册第二步
    toNextSecond(index) {
      if (index == 1) {
        var regex = /^1\d{10}$/;
        if (!regex.test(this.dataForm.phone)) {
          this.$message.error("请输入正确的手机号");
          return;
        } else if (this.dataForm.verifySmsCode.length !== 4) {
          this.$message.error("请输入正确的手机验证码");
          return;
        }
        // else if (this.dataForm.verifyCode.length !== 4) {
        //   this.$message.error("请输入图形验证码");
        //   return;
        // }
        else {
          if (this.isArgee) {
            var data = {
              phone: this.dataForm.phone,
              verifyCode: this.dataForm.verifyCode,
              verifySmsCode: this.dataForm.verifySmsCode.toUpperCase(),
            };
            this.loading = true;
            this.$http("post", "/sys/user/verifySmsCode.do", data).then(
              (res) => {
                if (res.code == "0000") {
                  this.index = index;
                }
                this.loading = false;
              }
            );
          } else {
            this.$message({
              type: "error",
              message: "请勾选并阅读协议",
            });
          }
        }
      } else if (index == 3) {
        var regex = /^1\d{10}$/;
        if (this.dataForm.merchantType == "") {
          this.$message.error("请选择用户类型");
          return;
        } else if (this.dataForm.userType == "") {
          this.$message.error("请选择类型");
          return;
        } else if (this.dataForm.userPwd == "") {
          this.$message.error("请输入密码");
          return;
        } else if (this.dataForm.comfirmPwd == "") {
          this.$message.error("请输入确认密码");
          return;
        } else {
          if (this.dataForm.merchantType == "BASE") {
            if (
              this.dataForm.recommendPhone == "" ||
              this.dataForm.recommendName == ""
            ) {
              this.$message.error("请输入推荐人电话/姓名");
              return;
            }
          }

          if (this.isArgee) {
            this.dataForm.userId = this.dataForm.phone;
            this.loading = true;
            this.$http(
              "post",
              "/sys/user/register.do",
              this.dataForm,
              "json"
            ).then((res) => {
              if (res.code == "0000") {
                this.index = index;
                setTimeout(() => {
                  this.$router.push("/");
                }, 5000);
              }
              this.loading = false;
            });
          } else {
            this.$message({
              type: "error",
              message: "请勾选并阅读协议",
            });
          }
        }
      }
    },
    // 选择用户类型
    selectUserTypeValue(val) {
      this.dataForm.merchantType = val;
    },
    // 选择类型
    selectTypeValue(val) {
      this.dataForm.userType = val;
    },
    // 密码验证
    usePwdValidate(val) {
      if (!pwdRegex.test(val)) {
        this.$message.error("请输入6-18位包含数字和字母的密码");
        this.pwdDisabled = true;
      } else {
        this.pwdDisabled = false;
      }
    },
    // 再次确认密码验证
    comfirmUsePwdValidate(val) {
      if (this.dataForm.userPwd !== this.dataForm.comfirmPwd) {
        this.$message.error("两次密码输入不一致");
        this.pwdIsRight = false;
      } else {
        this.pwdIsRight = true;
      }
    },
    countDown() {
      var t = 60;
      this.timer = setInterval(() => {
        t--;
        if (t == 0) {
          this.smsTitle = "发送验证码";
          this.disabled = false;
          clearInterval(this.timer);
          return;
        }

        this.smsTitle = t + "s重新发送";
      }, 1000);
    },
    // 发送短信
    sendSms() {
      console.log("点我");
      var regex = /^1\d{10}$/;
      if (regex.test(this.dataForm.phone)) {
        this.$http("post", "/sys/user/sendVerifySmsCode.do", {
          phone: this.dataForm.phone,
        }).then((res) => {
          if (res.code == "0000") {
            this.$message({
              type: "success",
              message: "发送成功",
            });
            this.countDown();
            this.disabled = true;
          }
        });
      } else {
        this.$message.error("请输入正确的手机号");
      }
    },
  },
};
</script>
<style scoped>
.user-info {
  margin-bottom: 50px;
}
.user-info p {
  line-height: 40px;
}
.user-info p span:nth-child(1) {
  font-size: 16px;
  color: #606266;
  font-size: 14px;
}
.user-info p span:nth-child(2) {
  font-size: 16px;
  color: #4a4a4a;
  font-size: 18px;
}
.user-info p:nth-child(1) {
  font-size: 16px;
  color: #4a4a4a;
}
.auto-width {
  width: 1200px;
  margin: 0 auto;
}
.prompt h2 {
  font-size: 14px;
  color: #606266;
}
.prompt p {
  color: #9b9b9b;
  font-size: 14px;
  line-height: 160%;
}
.prompt p span {
  color: #ee781b;
}
#progress-bar {
  width: 1049px;
  height: 130px;
  background: #f6f6f6;
  border-radius: 4px;
}
#progress-bar .text {
  margin-bottom: 15px;
  font-size: 0;
  padding-top: 25px;
}
#progress-bar .text span {
  display: inline-block;
  width: 32.33%;
  font-size: 16px;
  text-align: center;
  color: #4a4a4a;
}
#progress-bar .text span.active {
  color: #ee781b;
}
#progress-bar .bar-wrapper {
  font-size: 0;
}
#progress-bar .bar-wrapper .bar {
  width: 32.33%;
  text-align: center;
  display: inline-block;
  position: relative;
}
#progress-bar .bar-wrapper .bar .round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  background: #cdcdcd;
  display: inline-block;
  position: relative;
  z-index: 50;
}
#progress-bar .bar-wrapper .bar .line {
  width: 100%;
  height: 7px;
  background: #cdcdcd;
  position: absolute;
  left: -50%;
  top: 16px;
  z-index: 1;
}
#progress-bar .bar-wrapper .bar.active .round,
#progress-bar .bar-wrapper .bar.active .line {
  background: #ee781b;
}
.register-box {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 0;
  height: auto;
}
.regist-page {
  background: #fff;
  width: 1200px;
  margin: 10px auto;
}
#step-1 {
  width: 720px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-2 {
  width: 520px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-1 .input-group,
#step-2 .input-group {
  position: relative;
  height: 60px;
}
#step-1 .input-group .inner-box,
#step-2 .input-group .inner-box {
  height: 50px;
  line-height: 50px;
}
#step-1 .input-group .inner-box .lable,
#step-2 .input-group .inner-box .lable {
  font-size: 14px;
  display: inline-block;
  width: 125px;
  text-align: right;
  margin-right: 35px;
  color: #000000;
  height: 36px;
  line-height: 36px;
}
#step-1 .input-group .inner-box .phone,
#step-2 .input-group .inner-box .phone {
  height: 35px;
  width: 296px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  text-indent: 10px;

  font-size: 14px;
}
.sendSms {
  border: 0;
}
.sendSms:active {
  border: 0;
}
#step-1 .input-group .inner-box .wrapper,
#step-2 .input-group .inner-box .wrapper {
  height: 50px;
  line-height: 50px;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  position: relative;
}
#step-1 .input-group .inner-box .wrapper {
  width: 350px;
}
#step-2 .input-group .inner-box .wrapper {
  width: 298px;
}
#step-1 .input-group .inner-box .wrapper .v-code,
#step-2 .input-group .inner-box .wrapper .v-code {
  width: 246px;
  height: 35px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 14px;
  vertical-align: middle;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
}

#step-1 .input-group .inner-box .wrapper .box,
#step-2 .input-group .inner-box .wrapper .box {
  display: inline-block;
  width: 91px;
  height: 35px;
  background: #ffe7e7;
  border-radius: 2px;
  text-align: center;
  line-height: 35px;
  color: #d0021b;
  font-size: 14px;
  vertical-align: middle;
  margin-left: 6px;
}
#step-1 .input-group .inner-box .wrapper .box img {
  width: 100px;
  height: 35px;
}
#step-1 .input-group .inner-box .wrapper .box.box:hover,
#step-2 .input-group .inner-box .wrapper .box.box:hover {
  cursor: pointer;
}
#step-1 .input-group .inner-box .wrapper p,
#step-2 .input-group .inner-box .wrapper p {
  display: block;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: -130%;
  font-size: 16px;
  display: none;
}
#step-1 .input-group .inner-box .wrapper p .fa,
#step-2 .input-group .inner-box .wrapper p .fa {
  color: #2998e5;
}
#step-1 .input-group .warning,
#step-2 .input-group .warning {
  position: absolute;
  width: 155%;
  bottom: 5px;
  text-indent: 158px;
  color: #dd4249;
  display: none;
}
#step-1 .input-group .warning .fa,
#step-2 .input-group .warning .fa {
  margin-right: 8px;
}
#step-1 .sub,
#step-2 .sub {
  display: block;
  margin-top: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  width: 246px;
  height: 44px;
  background: #ee781b;
  border-radius: 4px;
}
#step-1 .sub {
  margin-left: 165px;
}
#step-1 .sub[disabled],
#step-2 .sub[disabled] {
  background: #aaaaaa !important;
  cursor: not-allowed;
}
#step-1 input[disabled] {
  cursor: not-allowed;
}

#step-2 .wrapper input {
  vertical-align: middle;
}
#step-2 .wrapper .safety {
  position: absolute;
  height: 50px;
  width: 150px;
  top: -5px;
  right: -75%;
  overflow: hidden;
}
#step-2 .wrapper .safety dl {
  width: 33.33%;
  float: left;
  text-align: center;
}
#step-2 .wrapper .safety dl dt {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #cdcdcd;
}
#step-2 .wrapper .safety dl dd {
  width: 100%;
  height: 10px;
  background: #cdcdcd;
}
#step-2 .wrapper .safety .safety-1.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-1.active dd {
  background: #dd5347;
}
#step-2 .wrapper .safety .safety-2.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-2.active dd {
  background: #faba6d;
}
#step-2 .wrapper .safety .safety-3.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-3.active dd {
  background: #1ba261;
}

#step-3 .container {
  width: 500px;
  margin: 0 auto 40px auto;
  margin-bottom: 70px;
}
#step-3 .container .title {
  text-align: left;
  margin-bottom: 50px;
  float: left;
}
#step-3 .container img {
  display: inline-block;
  width: 55px;
  height: 55px;
  vertical-align: middle;
  margin-right: 25px;
}
#step-3 .container .title .text {
  display: inline-block;
  height: 55px;
  line-height: 55px;
  font-size: 26px;
  vertical-align: middle;
}
#step-3 .container .message ul {
  overflow: auto;
}
#step-3 .container .message li {
  width: 50%;
  float: left;
  box-sizing: border-box;
  margin-bottom: 15px;
}
#step-3 .container .message li .icon {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: #cdcdcd;
  vertical-align: middle;
  margin-right: 15px;
  margin-left: 25%;
}
#step-3 .container .message li .icon.person {
  background: url(../../assets/img/icon-person.png) no-repeat center;
}
#step-3 .container .message li .icon.phone {
  background: url(../../assets/img/icon-phone.png) no-repeat center;
}
#step-3 .container .message li .icon.pay {
  background: url(../../assets/img/icon-id.png) no-repeat center;
  background-size: 100%;
}
#step-3 .container .message li .wrapper {
  display: inline-block;
  width: 215px;
  height: 45px;
  line-height: 45px;
  vertical-align: middle;
}
#step-3 .container .message li .payment {
  width: 33% !important;
  text-align: center;
}
#step-3 .container .message li .wrapper .lable {
  display: inline-block;
  width: auto;
}
#step-3 .time-out {
  text-align: center;
  color: #ee781b;
}
.succ {
  color: #6bc285 !important;
}

.input-group .rule img {
  width: 15px;
  height: 15px;
}
.select-icon {
  margin-right: 5px;
}
.input-group .rule a:hover {
  color: #f48d06;
}
</style>
